@import "@iiif/iiif-av-component/dist-css/styles.less";

.uv-iiif-extension-host.uv-av-extension {

  &.right-panel-enabled .footerPanel {
    position: relative;
    float: none;
    bottom: initial;
    right: initial;
    height: auto;
  }

  .footerPanel {
    position: absolute;
    float: right;
    bottom: 44px;
    right: 0;
    height: 0;
  }

  .centerPanel {
    .hover-preview {
      .label {
        height: 25px;
      }
    }

    .content .attribution {
      margin-bottom: 60px;
    }

    .iiif-av-component {
      // .player--loading {
      //   background-repeat: no-repeat;
      //   background-position: 50% 50%;
      //   background-image: url();
      // }

       .canvas-timeline-container .ui-slider-handle {
         pointer-events: none;
       }


      .btn i {
        height: 29px;
        width: 29px;
      }

      .options-container {
        &:after {
          content: '';
          clear: both;
        }
        padding-bottom: 1px;
      }

      .controls-container {
        margin-bottom: 5px;
        .time-display {
          padding-top: 10px;

          @media only screen and (min-width: @sm-min-width) and (max-width: 600px) {
            display: none;
          }
        }

        .volume {
          display: inline-block;
          float: none;

          @media only screen and (min-width: @sm-min-width) and (max-width: 600px) {
            display: none;
          }

          .volume-slider {
            margin-top: 17px !important;
          }
        }
      }
    }

    // .options-container {

    //     @margin-top: 110px;

    //     .sm-mediaquery({
    //         margin-top: @margin-top;
    //     });

    //     .lg-mediaquery({
    //         margin-top: @margin-top;
    //     });

    //     .md-mediaquery({
    //         margin-top: @margin-top;
    //     });

    // }
  }
}

.uv-iiif-extension-host.mobile {
  .centerPanel {
    .iiif-av-component {
      .controls-container {
        // hide the volume control on mobile
        .volume {
          display: none;
        }
      }
    }
  }
}
